<template>
  <el-row>
    <el-col :span="24">
      <el-input
        v-model="search[0].value"
        placeholder="搜索"
        class="input-with-select"
        @keyup.enter="refreshModList"
      >
        <template #prepend>
          <el-select
            v-model="search[0].type"
            class="el-select"
            style="width: 140px"
          >
            <el-option label="搜索帖子名称" value="0"></el-option>
            <el-option label="搜索用户ID" value="3"></el-option>
          </el-select>
        </template>
        <template #append>
          <el-button @click="refreshModList" icon="Search" />
        </template>
      </el-input>
    </el-col>
    <el-col :span="24">
      <el-select
        clearable
        v-model="search[1].value"
        class="el-select"
        style="width: 140px"
        placeholder="选择状态"
      >
        <el-option label="已锁定" value="0"></el-option>
        <el-option label="正常" value="1"></el-option>
        <el-option label="申请发布" value="2"></el-option>
        <el-option label="申请发布未通过" value="3"></el-option>
        <el-option label="未发布" value="4"></el-option>
      </el-select>
    </el-col>
  </el-row>

  <div v-loading="isLoadingData" :style="{ zIndex: 1 }">
    <el-table
      :data="mod_list"
      stripe
      height="calc(100vh - 15rem)"
      style="width: 100%; height: 100%"
    >
      <el-table-column prop="id" width="80" label="ID" />
      <el-table-column prop="name" label="资源名称" width="180" />
      <el-table-column prop="description" label="资源简介" width="180" />
      <el-table-column prop="uid" label="发布者ID" width="180" />
      <el-table-column prop="create_time" label="发布时间" width="180" />
      <el-table-column prop="stat" label="状态" width="180">
        <template #default="scope">
          <el-tag
            size="small"
            :type="mod_list[scope.$index].stat_data.type"
            v-if="mod_list[scope.$index].stat !== 3"
          >
            {{ mod_list[scope.$index].stat_data.name }}
          </el-tag>
          <el-popover
            v-if="mod_list[scope.$index].stat == 3"
            placement="top-start"
            title="原因"
            :width="200"
            trigger="hover"
            :content="mod_list[scope.$index].reason"
          >
            <template #reference>
              <el-tag size="small" type="danger">审核未通过</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template #default="scope">
          <el-button
            size="small"
            link
            type="primary"
            @click="toView(scope.$index)"
            >查看</el-button
          >

          <el-button
            size="small"
            link
            type="primary"
            @click="showExamineMode(scope.$index)"
            >审核</el-button
          >
          <el-button
            size="small"
            link
            type="danger"
            @click="showLockItem(scope.$index)"
          >
            {{ mod_list[scope.$index].stat == 0 ? '解锁' : '锁定' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-pagination
    background
    v-model:current-page="page"
    :page-size="limit"
    layout="prev, pager, next, jumper"
    :total="total"
    style="margin: 2rem 0"
  />

  <!--锁定资源弹窗-->
  <dialog-confirm
    title="提示"
    v-model:visible="dialogShow.lockMod"
    :loading="isLocking"
    @submit="lockItem(3)"
  >
    <span>
      <span>是否锁定资源[ID:{{ activeItem.id }}]</span>
      <span style="color: #008ac5">{{ activeItem.name }}</span>
    </span>
  </dialog-confirm>
  <!--审核资源弹窗-->
  <dialog-examine
    title="审核"
    v-model:visible="dialogShow.examineMod"
    @submit="examineMod"
    :loading-inject="isInjecting"
    :loading-success="isPassing"
  ></dialog-examine>
</template>
<script lang="ts">
import DialogConfirm from '@comps/dialogs/confirm.vue'
import DialogExamine from '@comps/dialogs/examine.vue'
import Method from '@/globalmethods.ts'
import { ElMessage } from 'element-plus'
import { watch } from 'vue'
import { modItem, res } from '../type.ts'

export default {
  name: 'admin-mod',
  components: { DialogExamine, DialogConfirm },
  data() {
    return {
      stat_filter: -1,
      page: 1,
      limit: 10,
      total: 0,
      isLoadingData: false,
      isLockAccountDialogVisible: false,
      isLocking: false,
      isInjecting: false,
      isPassing: false,
      dialogShow: {
        examineMod: false,
        lockMod: false,
      },
      search: [
        {
          value: '',
          type: '0',
        },
        {
          value: '',
          type: 2, // 状态
        },
      ],
      activeItem: <modItem>{},
      mod_list: <modItem[]>[],
    }
  },
  methods: {
    /**
     * 资源列表刷新
     */
    refreshModList() {
      this.isLoadingData = true
      let payLoad = {
        page: this.page,
        limit: this.limit,
        conditions: this.search
          .map((x: any) => {
            if (x.value !== '') return x
          })
          .filter(Boolean),
      }
      Method.api_post('/admin/mod_list', payLoad).then((response) => {
        this.isLoadingData = false
        let res = response.data as res
        if (res.code == 200) {
          if (this.page == 1) this.total = res.sum
          res.data.forEach((x: modItem) => {
            x.create_time = Method.formatNormalTime(<number>x.create_time)
            x.last_modify_time = Method.formatNormalTime(
              <number>x.last_modify_time,
            )
            x.likes = Method.getNumber(<number>x.likes)
            x.downloads = Method.getNumber(<number>x.downloads)
            x.stat_data = Method.getStat(x.stat)
            x.description =
              x.description.length > 64
                ? x.description.substring(0, 64) + '...'
                : x.description
          })
          this.mod_list = res.data
        }
      })
    },
    toView(index: number) {
      let id = this.mod_list[index].id
      window.open(`/ModDetail/${id}`, '_blank')
    },
    examineMod(e: any) {
      this.isInjecting = !e.result
      this.isPassing = e.result
      let stat = e.result ? 1 : 3
      Method.api_post('/admin/examine_mod', {
        id: this.activeItem.id,
        stat: stat,
        reason: e.reason,
      }).then((response) => {
        this.isPassing = false
        this.isInjecting = false
        let res = <res>response.data
        if (res.code == 200) {
          this.dialogShow.examineMod = false
          if (e.result) {
            ElMessage('已审核通过')
          } else {
            ElMessage('已拒绝通过')
          }
          this.refreshModList()
        }
      })
    },
    setModListFilter(stat_filter = -1) {
      this.page = 1
      this.stat_filter = stat_filter
      this.refreshModList()
    },

    showExamineMode(index: number) {
      this.activeItem = this.mod_list[index]
      this.dialogShow.examineMod = true
    },

    showLockItem(index: number) {
      this.dialogShow.lockMod = true
      this.activeItem = this.mod_list[index]
    },

    lockItem(type: number) {
      this.isLocking = true
      let id = this.activeItem.id
      let stat = this.activeItem.stat == 1 ? 0 : 1
      Method.api_post('/admin/lock_item', {
        type: type,
        id: id,
        stat: stat,
      }).then((response) => {
        this.isLocking = false
        let res = <res>response.data
        if (res.code == 200) {
          this.activeItem.stat = res.data.stat
          this.activeItem.stat_data = Method.getStat(res.data.stat)
          this.dialogShow.lockMod = false
          ElMessage(res.data.stat === 0 ? '锁定成功' : '解锁成功')
        }
      })
    },
  },
  mounted() {
    this.refreshModList()
    watch(
      () => this.page,
      () => {
        this.refreshModList()
      },
    )
  },
}
</script>
